<template>

  <component v-if="!!components[item.tag]&&!item.disTag" :is="components[item.tag]"  :conf="conf" :item="item"  v-bind="$attrs"  :form-data="conf.model" v-model="conf.model[item.vModel]">
    <template v-for="(val, name) in item.__slot__" v-slot:[name]>
      {{ val }}
    </template>
  </component>

  <component v-else :is="item.disTag??item.tag" v-bind="$attrs" :form-data="conf.model" v-model="conf.model[item.vModel]">
    <template v-for="(val, name) in item.__slot__" v-slot:[name]>
      {{ val }}
    </template>
  </component>
</template>

<script name="render-component">

import MyCheckboxGroup from './Elements/FormItems/MyCheckboxGroup/index'
import MyRadioGroup from './Elements/FormItems/MyRadioGroup/index'
import MySelect from './Elements/FormItems/MySelect/index'
import MyUpload from './Elements/FormItems/MyUpload/index'
import MyText from './Elements/FormItems/MyText/index'
import MyFillBlanks from './Elements/FormItems/MyFillBlanks'

export default {
  data(){
    return{
      components: {
        'my-checkbox-group': MyCheckboxGroup,
        'my-radio-group': MyRadioGroup,
        'my-select': MySelect,
        'my-upload': MyUpload,
        'my-text': MyText,
        'my-fill-blanks': MyFillBlanks
      }
    }
  },
  props: {
    item: Object,
    attrs: Object,
    conf: Object,
  },
  mounted() {
    let vm = this.item.defaultValue
    if (this.conf !== undefined) {
      console.log('props.item.defaultValue',this.item.defaultValue,this.item.tag)
      if(this.conf.model[this.item.vModel] === undefined)
        this.conf.model[this.item.vModel] = this.item.defaultValue
      vm = this.conf.model[this.item.vModel]
    }
  }
}

</script>